import React from "react";
import "./style.scss";
import logo from "../../logo.svg";
import { Menu, Button } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const items = [
    {
      label: "推荐",
      key: "1",
    },
    {
      label: "数码",
      key: "2",
    },
    {
      label: "家庭",
      key: "3",
    },
    {
      label: "手机",
      key: "4",
    },
    {
      label: "服饰",
      key: "5",
    },
  ];

  const avator = useSelector((state: any) => state.user.userInfo.avator);
  const nickname = useSelector((state: any) => state.user.userInfo.nickname);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const quitLogin = () => {
    // 1. 分发 quitLogin 用户信息
    dispatch({ type: "quitLogin" });
    // 2. 清除本地用户信息
    localStorage.removeItem("user");
    // 3. 跳转登录页面
    // navigate("/login");
  };
  return (
    <div className="header">
      <div className="left">
        <img src={logo} alt="" />
      </div>
      <div className="middle">
        <Menu items={items} mode="horizontal" theme="dark"></Menu>
      </div>
      <div className="right">
        <img src={avator} alt="" />
        <span>{nickname}</span>
        <Button type="primary" danger size="small" onClick={() => quitLogin()}>
          退出登录
        </Button>
      </div>
    </div>
  );
};

export default Index;
